<template>
    <div class="main-page">
        <dv-border-box-7>
            <div class="content-box">
                <Row type="flex" justify="center" align="middle" class-name="top-box">
                    <Col class="top-box-content">
                        数据分析
                    </Col>
                    <Col>
                        <dv-decoration-5 style="width:300px;height:40px;"/>
                    </Col>
                </Row>
                <Row v-if="companyType == 2" class-name="bottom-box">
                    <Col span="24">
                        <types-pie-receive-echart :height="350"></types-pie-receive-echart>
                    </Col>
                </Row>
                <Row v-else class-name="bottom-box">
                    <Col span="12">
                        <types-pillar-echart :width="echartWidth" :height="350"></types-pillar-echart>
                    </Col>
                    <Col span="12">
                        <types-pie-echart :width="echartWidth" :height="350"></types-pie-echart>
                    </Col>
                </Row>
            </div>
        </dv-border-box-7>
    </div>
</template>

<script>
import TypesPillarEchart from '@/components/echarts/types-pillar-echart/index'
import TypesPieEchart from '@/components/echarts/types-pie-echart/index'
import TypesPieReceiveEchart from '@/components/echarts/types-pie-receive-echart'

export default {
  components: { TypesPieReceiveEchart, TypesPieEchart, TypesPillarEchart },
  data () {
    return {
      echartWidth: (document.documentElement.clientWidth - 300) / 2,
      echartHeight: (document.documentElement.clientHeight - 330) / 2
    }
  },
  computed: {
    companyType () {
      return window.localStorage.getItem('company_type')
    }
  },
  mounted () {
    // this.$router.push({ path: '/record/list' })
  },
  methods: {}
}
</script>

<style scoped lang="less">
    .main-page {
        /*background-color: #3AB0FA;*/
        height: 100%;

        .content-box {
            padding: 20px;
            height: 100%;

            .top-box {
                flex-direction: column;
                margin-bottom: 20px;

                .top-box-content {
                    font-size: 18px;
                    font-weight: bold;
                    margin-bottom: -15px;
                }
            }

            .bottom-box {
                margin-top: 10%;
            }
        }
    }
</style>
